<template>
	<view class="main_bg">
		<app-header title="扫码报修"></app-header>
		<view class="card" v-for="(item,index) in data_list">
			<view class="cell" @click="reportShow=true">
				<view class="label">报修人：</view>
				<view class="value">
					{{report.name || '请选择'}}<u-icon size="32rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="cell">
				<view class="label">设备分类：</view>
				<view class="value" :class="!item.type_name1_f&&'empty'" @click="getClassShow(index,'type_name1')">
					{{item.type_name1_f || '请选择'}} <u-icon size="32rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="cell">
				<view class="label">设备类型：</view>
				<view class="value" :class="!item.type_name2_f&&'empty'" @click="getClassShow(index,'type_name2')">
					{{item.type_name2_f || '请选择'}} <u-icon size="32rpx" name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="cell">
				<view class="label">设备品牌：</view>
				<view class="value" :class="!item.type_name3_f&&'empty'" @click="getClassShow(index,'type_name3')">
					{{item.type_name3_f || '请选择'}} <u-icon size="32rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="cell">
				<view class="label">设备系列：</view>
				<view class="value" :class="!item.type_name4_f&&'empty'" @click="getClassShow(index,'type_name4')">
					{{item.type_name4_f || '请选择'}} <u-icon size="32rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="cell">
				<view class="label">设备名称：</view>
				<view class="value" :class="!item.device_name&&'empty'" @click="getDevice(index,'device_id')">
					{{item.device_name || '请选择'}} <u-icon size="32rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="cell">
				<view class="label">设备编号：</view>
				<view class="value">
					{{item.device_sn || ''}}
				</view>
			</view>
			<view class="cell">
				<view class="label">报修详情：</view>
			</view>
			<view class="textarea">
				<textarea v-model="item.describe"></textarea>
			</view>
			<view class="line"></view>
			<view class="cell">
				<view class="label">报修图片({{imgCount(item.store_imgs)}}/9)</view>
			</view>
			<view class="upload">
				<app-upload v-model="item.store_imgs" :value="item.store_imgs" accept="media" multiple :maxCount="9">
				</app-upload>
			</view>
		</view>
		<view class="submit_fix"></view>
		<view class="submit flex-c">
			<view class="submit_btn flex-c" @click="$u.throttle(onSubmit)">提交</view>
		</view>
		<u-popup :show="show" mode="bottom" @close="show=false" closeOnClickOverlay>
			<view v-if="classLoading" class="loading flex-c">
				<u-loading-icon></u-loading-icon>
			</view>
			<view v-if="!classLoading && classify.length==0">
				<u-empty mode="data" text="暂无数据"></u-empty>
			</view>
			<u-cell :title="item.district_name" isLink v-for="(item,index) in classify" :key="index"
				@click="setItem(item)"></u-cell>
			<view class="close flex-c" @click="show=false">取消</view>
		</u-popup>
		<u-popup :show="deviceShow" mode="bottom" @close="deviceShow=false" closeOnClickOverlay>
			<view v-if="classLoading" class="loading flex-c">
				<u-loading-icon></u-loading-icon>
			</view>
			<view v-if="!classLoading && deviceList.length==0">
				<u-empty mode="data" text="暂无数据"></u-empty>
			</view>
			<u-cell :title="item.device_name" isLink v-for="(item,index) in deviceList" :key="index"
				@click="setDevice(item)"></u-cell>
			<view class="close flex-c" @click="deviceShow=false">取消</view>
		</u-popup>
		<u-popup :show="reportShow" mode="bottom" @close="reportShow=false" closeOnClickOverlay>
			<view v-if="reportList.length==0">
				<u-empty mode="data" text="暂无数据"></u-empty>
			</view>
			<u-cell :title="item.name" isLink v-for="(item,index) in reportList" :key="index"
				@click="setReport(item)"></u-cell>
			<view class="close flex-c" @click="reportShow=false">取消</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		nextTick
	} from "vue"
	export default {
		name: "reapir",
		data() {
			return {

				deviceShow: false,
				classLoading: false,
				reportShow: false,
				dataIndex: 0,
				key: "",
				show: false,
				classify: [],
				classifyInit: [],
				reportList: [],
				type: [],
				report: {
					name: '',
					id: ''
				},
				data_list: [{
					type_name4: "",
					type_name1: "",
					type_name2: "",
					type_name3: "",
					device_id: "",
					describe: "",
					store_imgs: ""
				}],
				formInfo: {},
				deviceFilter: {},
				deviceInfo: {},
				deviceList: {},
			}
		},
		computed: {
			imgCount() {
				return (urls) => {

					const list = urls ? urls.split('|') : []
					return list.length
				}
			}
		},
		onLoad(options) {
			this.getClassifyInit()
			if (options.id) {
				this.$set(this.deviceFilter, 'id', options.id)
				this.getInfo()
			}
			if (options.device_sn) {
				this.$set(this.deviceFilter, 'device_sn', options.device_sn)
				this.getInfo()
			}
		},
		created() {

		},
		methods: {
			getDevice(index) {
				const item = this.data_list[index]
				let type_id
				if (item.type_name4) {
					type_id = item.type_name4
				} else {
					this.$func.tips('请选择系列')
					return
				}
				this.deviceList = []
				this.dataIndex = index
				this.classLoading = true
				this.deviceShow = true


				this.$http.post('/data/api.auth.User/categoryList4', {
					type_id: type_id
				}).then(res => {
					this.deviceList = res.data
					this.classLoading = false
				}).catch(e => {
					this.classLoading = false
				})
			},
			getUsers() {
				this.$http.post('/data/api.auth.Repair/users', {
					device_id: this.deviceInfo.id
				}).then(res => {
					this.reportList = res.data
				})
			},
			setDevice(item) {
				this.$set(this.data_list[this.dataIndex], 'device_id', item.id)
				this.$set(this.data_list[this.dataIndex], 'device_name', item.device_name)
				this.$set(this.data_list[this.dataIndex], 'device_sn', item.device_sn)
				this.deviceShow = false
			},
			setReport(item) {
				this.report = item
				this.reportShow = false
			},
			getInfo() {
				this.$http.post('/data/api.auth.User/deviceVier', this.deviceFilter).then(res => {
					if (res.data.device_status == 3) {
						this.$func.tips(res.data.device_name + '已报废')
						return
					}
					this.deviceInfo = res.data
					this.getUsers()
					this.$set(this.data_list, 0, {
						type_name1: res.data.type_name1 && res.data.type_name1.id,
						type_name2: res.data.type_name2 && res.data.type_name2.id,
						type_name3: res.data.type_name3 && res.data.type_name3.id,
						type_name4: res.data.type_name4 && res.data.type_name4.id,

						type_name1_f: res.data.type_name1 && res.data.type_name1.district_name,
						type_name2_f: res.data.type_name2 && res.data.type_name2.district_name,
						type_name3_f: res.data.type_name3 && res.data.type_name3.district_name,
						type_name4_f: res.data.type_name4 && res.data.type_name4.district_name,
						device_id: res.data.id,
						device_name: res.data.device_name,
						device_sn: res.data.device_sn,
						describe: "",
						store_imgs: ""
					})
				})
			},
			setItem(item) {
				this.$set(this.data_list[this.dataIndex], this.key, item.id)
				this.$set(this.data_list[this.dataIndex], this.key + '_f', item.district_name)
				this.show = false
			},
			add() {
				this.data_list.push({
					type_name4: "",
					type_name1: "",
					type_name2: "",
					type_name3: "",
					device_id: "",
					device_sns: "",
					describe: "",
					store_imgs: ""
				})
			},
			del(index) {
				this.data_list.splice(index, 1)
			},
			getClassifyInit() {
				this.$http.post('/data/api.auth.User/categoryList', {}).then(res => {
					this.classifyInit = res.data
				})
			},
			getClassShow(index, key) {
				this.classify = []
				this.dataIndex = index
				this.key = key
				this.getClassify()

			},
			getClassify() {

				let url = "/data/api.auth.User/categoryList"
				let query = {}
				let id

				if (this.key == 'type_name2') {
					id = this.data_list[this.dataIndex].type_name1
					if (!id) {
						this.$func.tips('请选择分类')
						return
					}
				} else if (this.key == 'type_name3') {
					id = this.data_list[this.dataIndex].type_name2
					if (!id) {
						this.$func.tips('请选择类型')
						return
					}
				} else if (this.key == 'type_name4') {
					id = this.data_list[this.dataIndex].type_name3
					if (!id) {
						this.$func.tips('请选择品牌')
						return
					}
				}
				query = {
					id,
					type_id: id
				}
				this.show = true
				if (this.key == 'type_name1') {
					this.classify = [...this.classifyInit]
					return
					// url = "/data/api.auth.User/categoryList"
				} else if (this.key == 'type_name2') {
					url = "/data/api.auth.User/categoryList1"
				} else if (this.key == 'type_name3') {
					url = "/data/api.auth.User/categoryList2"
				} else if (this.key == 'type_name4') {
					url = "/data/api.auth.User/categoryList3"
				}
				this.classLoading = true
				this.$http.post(url, query).then(res => {
					this.classify = res.data
					this.$nextTick(() => {
						this.classLoading = false
					})
				})
			},
			onSubmit() {
				uni.showLoading({
					title: "提交中，请稍等",
					mask: true,
				})
				const data_list = [...this.data_list]
				let dataList = []
				for (let vo of data_list) {
					dataList.push({
						id: vo.device_id,
						describe: vo.describe,
						store_imgs: vo.store_imgs ? vo.store_imgs.split('|') : []
					})
				}
				this.$http.post('/data/api.auth.Repair/addOrder', {
					data_list: JSON.stringify(dataList),
					report_id: this.report.id
				}).then(res => {
					this.data_list = [{
						type_name4: "",
						type_name1: "",
						type_name2: "",
						type_name3: "",
						device_id: "",
						describe: "",
						store_imgs: ""
					}]
					uni.showLoading({
						title: "提交成功",
						mask: true,
					})
					setTimeout(() => {
						uni.hideLoading()
						this.$func.toBack()
					}, 1000)

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.close {
		font-size: 32rpx;
		color: rgba(79, 111, 246, 1);
		height: 80rpx
	}

	.card {
		margin: 20rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		padding: 0 20rpx;

		.add_btn {
			color: #4F6FF6;
			font-size: 28rpx;
			width: 116rpx;
			height: 52rpx;
			background-color: rgba(223, 229, 255, 1);
			opacity: 1;
			border-radius: 10rpx;

			&.del {
				background-color: #FFE7E4;
				color: #D81E06;
			}
		}
	}

	.empty {
		color: #ADADAD;
	}

	.line {
		border-bottom: 1px solid #E9E9E9;
		padding-bottom: 30rpx;
	}

	.textarea {
		background-color: #F5F5F5;
		border-radius: 10rpx;
		padding: 10rpx;

		textarea {
			height: 184rpx;
			width: 100%;
		}
	}

	.loading {
		padding-top: 20px;
	}

	.submit_fix {
		height: 190rpx;
	}

	.submit {
		background-color: #F7F7F7;
		padding: 20rpx 0 50rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.submit_btn {
			width: 600rpx;
			height: 92rpx;
			background: rgba(79, 111, 246, 1);
			border-radius: 10rpx;
			color: #ffffff;

		}

	}
</style>